import React, { useEffect } from 'react'
import styles from './index.module.scss'
import { Tag } from 'antd'
import { useAppDispatch, useAppSelector } from '@/store'
import { useParams } from 'react-router-dom'
import { select_current_exam_score, select_current_exam_topic_id, select_exam_topic_list } from '@/store/slice/subject/select'
import { get_exam_topic_list_async } from '@/store/slice/subject/request'

import ExamDetail from '@/common_components/exam_detail'
import { set_clear_exam_topic_list } from '@/store/slice/subject'
import { set_current_exam_topic_id } from '@/store/slice/subject'
import classNames from 'classnames'

// 查看试卷
export default function ReadExam() {
  const dispatch = useAppDispatch()
  const params = useParams()
  // 获取路由跳转过来携带的试卷id参数
  const exam_id = params.exam_id as string

  // 获取考试题目的列表
  const exam_topic_list = useAppSelector(select_exam_topic_list)
  // 获取选中的题目id
  const current_id = useAppSelector(select_current_exam_topic_id)
  // 获取选中的试卷的分数
  const score = useAppSelector(select_current_exam_score)

  // 获取考试题目的列表 在return中进行清空数据，防止出现页面出现闪烁
  useEffect(() => {
    dispatch(get_exam_topic_list_async(exam_id))

    // 页面销毁时需要将对应的数据也清空，否则会出现闪烁
    return () => {
      dispatch(set_clear_exam_topic_list([]))
    }
  }, [exam_id])

  // 点击列表的题目
  const clickTopic = (id: number) => {
    dispatch(set_current_exam_topic_id(id))
  }

  return (
    <div className={styles.wrap}>
      <div className={styles.list}>
        <div className={styles.title}>
          考试分数：<Tag color="error">{score}</Tag>
        </div>
        <div className={styles.title}>考题列表</div>
        <ul>
          {exam_topic_list.map((item: any, index: any) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <li key={item._id} onClick={() => clickTopic(item._id)} className={classNames({ active: current_id === item._id })}>
                  <span>
                    {index + 1}. {item.title}{' '}
                  </span>
                </li>
                {item.pass ? (
                  <Tag style={{ marginBottom: 10 }} color="green">
                    √
                  </Tag>
                ) : item.is_corret ? (
                  <Tag style={{ marginBottom: 10 }} color="red">
                    X
                  </Tag>
                ) : (
                  ''
                )}
              </div>
            )
          })}
        </ul>
      </div>
      <div className={styles.detail}>
        <ExamDetail type="read"></ExamDetail>
      </div>
    </div>
  )
}
